<template>
    <div>
        客户订单
        <!--1.多条件查询栏 -->
        <el-form :inline="true" :model="orderSearch" class="demo-form-inline" style="margin-top: 20px;">
            <!-- 搜索栏第一行 -->
            <el-row style="text-align: left;">
                <el-col :span="20" :offset="2">
                    <el-form-item label="订单编号">
                        <el-input v-model="orderSearch.orderno" placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="客户姓名">
                        <el-input v-model="orderSearch.name" placeholder="客户姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="订单状态">
                        <el-select v-model="orderSearch.status" placeholder="请选择订单状态">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <!-- 搜索栏第二行 -->
            <el-row style="text-align: left;">
                <el-col :span="20" :offset="2">
                    <el-form-item label="活动时间">
                        <el-date-picker v-model="ordertime.date" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateFormat">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button icon="el-icon-search"  type="primary" circle @click="search()"></el-button>
                        <el-button type="primary" @click="batchDelete()">批量删除</el-button>
                        <el-button type="primary" @click="clearForm()">清空</el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

        <!--2.订单表格-->
        <el-row style="margin-top: 30px;">
            <el-col :span="22" :offset="1">
                <template>
                    <el-table :data="orderList" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column label="订单编号" width="150">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.orderno }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订单客户" width="120">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="收货地址" width="170">
                            <template slot-scope="scope">
                                <el-tag size="medium">{{ scope.row.address }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="总金额" width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ (scope.row.totalmoney ).toFixed(2)}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="订单状态" width="100">
                            <template slot-scope="scope">
                                <div style="margin-left: 10px" :class="binClass(scope.row.status)">
                                    {{binConter(scope.row.status)}}</div>
                            </template>
                        </el-table-column>

                        <el-table-column label="下单时间" width="200">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.ordertime }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="300" align="center">
                            <template slot-scope="scope"> 
                                <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)"
                                    :disabled="isDisabled(scope.row)">修改</el-button>
                                <el-button size="mini" type="primary" 
                                    @click="lookup(scope.$index, scope.row)">查看详情</el-button>
                                <el-button size="mini" type="danger" 
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

            </el-col>



        </el-row>

        <!--3.分页 -->
        <el-row style="text-align: center;margin-top: 50px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="orderSearch.page" :page-sizes="[2, 4]" :page-size="orderSearch.size"
                layout="prev, pager, next, jumper,total, sizes" :total="total">
            </el-pagination>
        </el-row>


        <!--4.查看详情对话框 -->
        <el-row>
            <el-dialog title="订单详情" :visible.sync="dialogTableVisible">
                <el-table :data="orderDetails" align="center">
                    <el-table-column property="name" label="商品名称" width="150"></el-table-column>
                    <el-table-column property="num" label="商品数量" width="200"></el-table-column>
                    <el-table-column  label="商品单价" width="200">
                        <template slot-scope="scope">
                            {{(scope.row.sale_price).toFixed(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column label="总计">
                        <template slot-scope="scope">
                            {{(scope.row.num * scope.row.sale_price).toFixed(2)}}
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-row>

        <!--5.修改订单信息 -->
        <el-drawer title="修改订单信息" :visible.sync="visAlterDrawer" direction="rtl" custom-class="demo-drawer"
            ref="drawer">
            <el-row>
                <el-col :span="18" :offset="3">
                    <div class="demo-drawer__content">

                        <el-form :model="orderMessage" style="text-align: left ;">
                            <el-form-item label="订单客户" :label-width="formLabelWidth">
                                <el-input v-model="orderMessage.name" autocomplete="off" style="width: 250;"></el-input>
                            </el-form-item>
                            <el-form-item label="收货地址" :label-width="formLabelWidth">
                                <el-input v-model="orderMessage.address" autocomplete="off"
                                    style="width: 250;"></el-input>
                            </el-form-item>
                            <el-form-item label="订单金额" :label-width="formLabelWidth">
                                <el-input-number v-model="totalPrice" :min="1" :max="9999" :precision="2"  @change="alterPrice"
                                    label="描述文字"></el-input-number>
                            </el-form-item>

                            <el-form-item label="订单状态" :label-width="formLabelWidth">
                                <el-select v-model="orderMessage.status">
                                    <el-option label="未审核" :value="0"></el-option>
                                    <el-option label="已审核" :value="1"></el-option>
                                    <el-option label="已发货" :value="2"></el-option>
                                    <el-option label="退货中" :value="3"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="下单时间" :label-width="formLabelWidth">
                                <el-date-picker v-model="orderMessage.ordertime" type="datetime" placeholder="选择日期时间"
                                    value-format="yyyy-MM-dd HH:mm:ss">
                                </el-date-picker>
                            </el-form-item>
                        </el-form>

                        <el-row>
                            <el-col style="text-align: right;">
                                <el-link type="primary" @click="innerDrawer = true">修改订单项</el-link>
                            </el-col>
                        </el-row>

                        <!-- 修改订单项 -->
                        <el-drawer title="修改订单项" :append-to-body="true" :visible.sync="innerDrawer" size="50%">
                            <el-table :data="orderDetails">
                                <el-table-column property="name" label="商品名称" width="150"></el-table-column>
                                <el-table-column label="商品数量" width="200" align="center">
                                    <template slot-scope="scope">
                                        <el-input-number v-model="scope.row.num" @change="handleChange(scope.row)"
                                            :precision="1" :min="1" :max="scope.row.stock"
                                            label="描述文字"></el-input-number>
                                    </template>

                                </el-table-column>

                                <el-table-column label="商品单价" width="200" align="center">
                                    <template slot-scope="scope">
                                        {{(scope.row.sale_price).toFixed(2)}}
                                    </template>
                                </el-table-column>

                                <el-table-column label="总计" align="center">
                                    <template slot-scope="scope">
                                        {{ (scope.row.num * scope.row.sale_price).toFixed(2) }}
                                    </template>
                                </el-table-column>

                            </el-table>

                            <el-row style="margin-top: 30px">
                                <el-col :span="4" :offset="17">
                                   订单总价：<el-tag>{{getTotal().toFixed(2)}}</el-tag>
                                </el-col>
                            </el-row>

                            <el-row style="margin-top: 30px" >
                                <el-col :span="14" :offset="8">
                                    <el-button @click="cancelInnerForm">取 消</el-button>
                                    <el-button type="primary" @click="confirmAlter">确定</el-button>

                                </el-col>
                            </el-row>





                        </el-drawer>


                        <div class="demo-drawer__footer">
                            <el-button @click="cancelOutterForm">取 消</el-button>
                            <el-button type="primary" @click="submitAlter" :loading="loading">{{ loading?
                                '提交中...' : '确 定' }}</el-button>
                        </div>
                    </div>

                </el-col>
            </el-row>

        </el-drawer>




    </div>
</template>


<script>
import axios from 'axios';



export default{
    data(){
        return{
            isPageChangeToOne:true,
            //1.搜索栏数据
            orderSearch:{

                page:1,
                size:2,
                
            },
            options: [{
                value: '0',
                label: '未审核'
            }, {
                value: '1',
                label: '已审核'
            }, {
                value: '2',
                label: '已发货'
            }, {
                value: '3',
                label: '退货中'
            }],
            ordertime: {
                starttime:'',
                endtime:'',
                date:''
            },

            // 2.表格数据
            orderList:[],
            selection:[],
            

            //3.分页数据（4个）  
            total:0,
            totalPage:0,

            //4.查看详情数据
            dialogTableVisible:false,
            orderDetails:[],

            //5.修改订单数据
            totalPrice:0,
            visAlterDrawer:false,
            orderMessage:{},
           
            loading:false,
            formLabelWidth: '80px',

            innerDrawer:false
        }
    },
    methods:{
        //1.搜索栏函数
        search(){   
            this.orderSearch.starttime=this.ordertime.starttime
            this.orderSearch.endtime=this.ordertime.endtime

            if(this.isPageChangeToOne){
                this.orderSearch.page=1
            }
            this.$axios.post("order/findAll",this.orderSearch).then(respData=>{
                console.log(respData)
                this.orderList=respData.data.data.data
                this.total=respData.data.data.total
                this.totalPage=respData.data.data.totalPage
            })
            
        },
        batchDelete(){
              //a.判断是否多选
              if(this.selection.length ==0){
                    //弹出错误提示
                    this.$message({
                        message: '您还未选择要删除的数据！!',
                        type: 'warning'
                    });
                    return;

                } 
                  //b.定义一个字符串用于拼接id
                  var ids="";
                for(var i=0;i<this.selection.length;i++){
                    ids+=this.selection[i].id;
                    if(i<this.selection.length-1){
                        ids+=",";
                    }
                }
                console.log(ids);
                //c.发动异步请求
                this.$axios.get("/order/batchDelete/"+ids).then(respData=>{
                    //批量删除成功
                    if(respData.data.data){
                        //弹出成功提示
                        this.$message({
                            message: '批量删除成功!',
                            type: 'success'
                        });
                        //清空多选
                        this.selection = [];
                       


                    }
                     //重新加载页面
                     this.search()
                });          
        },
        clearForm(){
            this.orderSearch.orderno=null;
            this.orderSearch.name=null;
            this.orderSearch.status=null;
            this.ordertime={}
            this.search()

        },
        dateFormat(picker){
             this.ordertime.starttime=picker[0];
             this.ordertime.endtime=picker[1]
        },




        //2.表格函数
        handleSelectionChange(rows){
            this.selection=rows
               
        },
        handleEdit(index, row){
            this.visAlterDrawer=true
            this.orderMessage=row
            this.lookup(index,row)
            this.totalPrice=this.orderMessage.totalmoney
            this.dialogTableVisible=false;

        },
        handleDelete(index,row){
            this.$axios.delete("order/deleteById/"+row.id,).then(respData=>{
                if(respData.data.data){
                    this.$message({
                        message:"订单删除成功！",
                        type:"success"
                    })

                    this.search()
                }
            })
        },
        lookup(index,row){
            this.$axios.get("order/findById/"+row.id).then(respData=>{
                console.log(respData)
                this.orderDetails=respData.data.data
            })
            this.dialogTableVisible=true;

        },
        isDisabled(row){
            if(row.status==0){
                return false
            }else{
                return true
            }
        },
         //订单状态数据回显
         binConter(status){
                
                switch (status) {
                    case 0:
                        return '未审核';
                    case 1:
                        return '已审核';
                    case 2:
                        return '已发货';
                    case 3:
                        return '退货中';  
                    default:
                        return '';
                }
            },
            binClass(status){
                switch (status) {
                    case 0:
                        return 'tagblue0';
                    case 1:
                        return 'tagblue1';
                    case 2:
                        return 'tagblue2';
                    case 3:
                        return 'tagblue3';
                    default:
                        return '';
                }
            },
  

        //3.分页函数
        handleSizeChange(size){
            this.orderSearch.size=size;
            this.orderSearch.page=1
            this.search()
        },
        handleCurrentChange(page){
            this.isPageChangeToOne=false;
            this.orderSearch.page=page;
            this.search()
            this.isPageChangeToOne=true
        } ,




        
        //4.修改表单函数
        alterPrice(value){
            this.orderMessage.totalmoney=value
        },
        //外层抽屉确认按钮
        submitAlter(down) {
            this.orderMessage.totalmoney=this.totalPrice
            if (this.loading) {
                return;
            }
            this.$confirm('确定修改该订单吗？').then(_ => {
                    this.loading = true;

                    this.$axios.put("order/alterOrder",this.orderMessage).then(respData=>{
                        if(respData.data.data){
                            this.loading = false;
                        }
                        this.visAlterDrawer=false
                        this.isPageChangeToOne=false
                        this.search()

                    })
                
                }).catch(_ => { 
                    this.loading = false;
                    this.visAlterDrawer=false

                });
        },
        //外层抽屉取消按钮
        cancelOutterForm(){   
            this.visAlterDrawer=false
            this.isPageChangeToOne=false
            this.orderMessage={}
            this.search()
        },

        //内层抽屉数字框更改按钮点击事件
        handleChange(row){
            var newItem=row.id + "_" + row.num + "_" + row.num * row.sale_price
            console.log(newItem)
            if(this.orderMessage.itemAlterList==null){
                var itemAlterList=[];
                this.orderMessage.itemAlterList=itemAlterList
                this.orderMessage.itemAlterList.push(newItem)
                console.log(this.orderMessage.itemAlterList)
                return
            }else{
                for(let i = 0; i < this.orderMessage.itemAlterList.length; i++){
                    if(this.orderMessage.itemAlterList[i].startsWith(row.id + "_")){
                        this.orderMessage.itemAlterList[i] = newItem
                        return
                    }
                } 
                this.orderMessage.itemAlterList.push(newItem)
            }
          
        },
        //内层抽屉确认按钮
        confirmAlter(){
            this.totalPrice=this.getTotal()
            this.innerDrawer=false
        },
        //内层抽屉取消按钮
        cancelInnerForm(){
            if(this.orderMessage.itemAlterList.length!=0){
                this.orderMessage.itemAlterList=[]
            }
            this.innerDrawer=false
        },
        //内层抽屉计算总价
        getTotal(){
            let totalmoney=0;
            for(const item of this.orderDetails){
                totalmoney+=item.num * item.sale_price
            }
            this.orderMessage.totalmoney=totalmoney
            return totalmoney

        }
        

     

    },
    mounted(){
        this.search()

    }
   
}
</script>

<style scoped>
  .tagblue0 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #fa556e;
      color: #fa5563;
  }

  .tagblue1 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #21BD88;
      color: #21BD88;
  }

  .tagblue2 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #2e0cd6;
      color: #2e0cd6;
  }

  .tagblue3 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #f3880d;
      color: #f3880d;
  }
</style>

